<script type="text/javascript" src="../../js/jquery-3.6.0.min.js"></script>
<style>

    input{
        border-radius: 5px;
        height: 30px;
        border-color: grey;
    }
    .left{
        text-align: right;
    }
    .cen{
        text-align: center;
    }
    .tip{
        font-size: small;
        text-align: right;
    }
    .login{
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        margin: auto;
        width: 30%;
        height: 300px;
        padding-right: 2%;
        background: white;
        opacity: 0.8;
        box-shadow: 5px 5px 3px 2px lightgrey;
    }
    .readerRegister{
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        margin: auto;
        width: 30%;
        height: 60%;
        padding-right: 2%;
        padding-bottom: 2%;
        padding-left: 2%;
        background: white;
        opacity: 0.6;
        box-shadow: 5px 5px 3px 2px lightgrey;
    }
    .authorRegister{
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        margin: auto;
        width: 30%;
        height: auto;
        padding-right: 2%;
        padding-bottom: 2%;
        padding-left: 2%;
        background: white;
        opacity: 0.6;
        box-shadow: 5px 5px 3px 2px lightgrey;
    }
    .btn-primary{
        width: 100px;
        height: 40px;
        color: white;
        background: black;
        font-size: large;
        font-weight: bold;
    }
    .authorInfo{
        width: 300px;
        height: 400px;
        padding-right: 2%;
        padding-bottom: 2%;
        padding-left: 2%;
        background: white;
        opacity: 0.6;
        box-shadow: 5px 5px 3px 2px lightgrey;
    }

</style>